<script setup lang="ts">

import {EChartsOption} from "echarts";

const loading = ref(false);
const value = ref(0);
const options = [
  {
    value: 0,
    label: '近7日'
  }
]

const echartsOption = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['近30日每日灵石储备值/近7日每日储备值/近24小时每小时灵石储备值'],
    selectedMode: false,
    bottom: '0',
    left: '0',
    itemWidth:14,
  },
  grid: {
    top: '10',
    left: '10',
    right: '0',
    bottom: '40',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        show: false
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '近30日每日灵石储备值/近7日每日储备值/近24小时每小时灵石储备值',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [100, 200, 300, 500, 400, 250, 80]
    }
  ] as any
}) as EChartsOption
</script>

<template>
  <div class="ml-6 bg-white" style="position: relative;">
    <div class="text-[12px] mb-4 ml-4 mt-4 font-bold" >平台灵石储备变化图</div>
    <div class="text-[20px] mb-4 ml-4" style="color: #165baa;">5,000,000</div>
    <div class="text-[12px] mb-4 ml-4 text-slate-500">当前灵石储备值</div>
    <el-cascader v-model="value" :options="options" style="position: absolute;top: 10px;right: 10px; width: 100px;" size="small">
      <template #default="{ data }">
        <span class="text-[12px] !w-16 inline-block">{{ data.label }}</span>
      </template>
    </el-cascader>
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <Echart :height="400" :width="600" :options="echartsOption" />
      </el-skeleton>
    </el-card>
  </div>
</template>

<style scoped lang="scss">

</style>

